<script src="/vendor/laravel-admin-ext/echarts/echarts.min.js"></script>
<div class="row">
    <div class="col-md-12">
        <div class="box box-info">
            <form action="{{admin_route('patent-statistics')}}" method="get" accept-charset="UTF-8" class="form-horizontal" pjax-container="">
                <div class="box-body">
                    <div class="fields-group">
                        <div class="col-md-12">
                            {{--<div class="form-group">--}}
                                {{--<label for="patent_person" class="col-sm-2 asterisk  control-label">专利状态</label>--}}
                                {{--<div class="col-sm-8" id="patent_person">--}}
                                    {{--@foreach($states as $state_id=>$state_name)--}}
                                    {{--<label class="checkbox-inline">--}}
                                        {{--<input type="checkbox" name="patent_state[]" value="{{$state_id}}"  @if(!empty($filter['patent_state']) && in_array($state_id,$filter['patent_state'])) checked="checked" @endif>{{$state_name}}&nbsp;&nbsp;--}}
                                    {{--</label>--}}
                                    {{--@endforeach--}}
                                {{--</div>--}}
                            {{--</div>--}}
                        {{--<div class="form-group  ">--}}
                            {{--<label for="start_date" class="col-sm-2 asterisk control-label">时间</label>--}}
                            {{--<div class="col-sm-8">--}}
                                {{--<div class="row" style="width: 370px">--}}
                                    {{--<select>--}}
                                        {{--<option value ="volvo">Volvo</option>--}}
                                        {{--<option value ="saab">Saab</option>--}}
                                        {{--<option value="opel">Opel</option>--}}
                                        {{--<option value="audi">Audi</option>--}}
                                    {{--</select>--}}
                                {{--</div>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                            <div class="form-group  ">
                                <label for="start_date" class="col-sm-2 asterisk control-label">时间</label>
                                <div class="col-sm-8">
                                    <div class="row" style="width: 370px">
                                        <div class="col-lg-6">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                <input type="text" name="start_date" value="{{$filter['start_date']??''}}" class="form-control start_date" style="width: 150px">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                <input type="text" name="end_date" value="{{$filter['end_date']??''}}" class="form-control end_date" style="width: 150px">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group  ">
                                <div class="col-sm-10">
                                    <div class="btn-group pull-right">
                                        <div class="col-sm-6">
                                            <a href="{{admin_route('patent-statistics')}}"  class="btn btn-default">清空条件</a>
                                        </div>
                                        <div class="col-sm-6">
                                            <button class="btn btn-primary">开始统计</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div style="height: 600px;">
                <div id="patent-echart" style="width: 100%;height:100%;">加载中....</div>
            </div>
           <br/>
        </div>
    </div>
</div>



<script>
    var myChart_patent = echarts.init(document.getElementById('patent-echart'));
    var option = {
        title: {
            text: '专利统计',
            //subtext: '副标题',
            //sublink: '标题链接'
            x:'center'
        },
        legend: {bottom: 0},
        tooltip: {},
        dataset: {
            dimensions: ["product",@foreach($types as $type_id => $type_name) "{{$type_name}}",@endforeach
            ],
            source: [
                @foreach($states as $state_id=>$state)
                {product: '{{$state}}',@foreach($types as $type_id => $type_name) '{{$type_name}}': "{{$count[$state_id][$type_id]??0}}",@endforeach},
                @endforeach
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        series: [
            @foreach($types as $type_id => $type_name)
            {type: 'bar'},
            @endforeach
        ]
    };
    $(function () {
        $('.start_date').datetimepicker({"format":"YYYY-MM-DD","locale":"zh-CN"});
        $('.end_date').datetimepicker({"format":"YYYY-MM-DD","locale":"zh-CN","useCurrent":false});
        $(".start_date").on("dp.change", function (e) {
            $('.end_date').data("DateTimePicker").minDate(e.date);
        });
        $(".end_date").on("dp.change", function (e) {
            $('.start_date').data("DateTimePicker").maxDate(e.date);
        });

        myChart_patent.setOption(option, true);
    });
    function test(){
        option.dataset.source.forEach((val,index)=>{
            val["发明专利"] = 100;
        })
        myChart_patent.setOption(option, true);
    }
</script>